<script setup lang="ts">
// vue3原生的语法
// defineProps({
//   money: {
//     type: Number,
//     required: true
//   },
//   car: {
//     type: String,
//     required: false,
//     default: '小黄车'
//   }
// })

// vue3结合ts的语法
// withDefaults函数   设置默认值
// const props =withDefaults(defineProps<{
//   money: number
//   car?: string
// }>(), {
//   car: '小黄车'
// })

//响应式语法糖 解构 + defineProps  得配置个选项

const {money, car= '小绿车'} =defineProps<{
  money: number
  car?: string
}>()


console.log(money, car);
// vue3语法 
// const emit = defineEmits(['changeMoney', 'changeCar'])

// ts结合vue3  emit
const emit =defineEmits<{
  (e:'changeMoney', money: number): void
  (e: 'changeCar', car: string): void
}>()

const pay = () => {
  emit('changeMoney', 10)
}

</script>

<template>
  <div class="child-page">
    child
    车: {{ car }}------ 钱{{ money }}
  </div>
  <button @click="pay">花钱</button>
</template>

<style lang="scss" scoped></style>
